<template>
  <div>
    <homeTop @goLoginClick="goLoginClick"  @go_search="$router.push('/search')"></homeTop>
<span class="iconfont iconjiantou1" @click="go_management"></span>
    <van-tabs v-model="titleActive">
      <van-tab v-for="(item,index) of titleListData" :title="item.name" :key="index">
        <van-list
          v-model="item.loading"
          :finished="item.finished"
          finished-text="我是有底线的!!"
          @load="BaronLoad"
          :immediate-check="false"
        >
          <homeBar
            @goParticulars="$router.push({path:`/particulars?id=${Baritem.id}` })"
            v-for="(Baritem,index) of item.barListData"
            :newsList="Baritem"
            :key="index"
          ></homeBar>
        </van-list>
      </van-tab>
    </van-tabs>


  </div>
</template>

<script>
import homeTop from "../components/HomeTop";
import homeBar from "../components/homeBar";
export default {
  data() {
    return {
      titleActive: 1,
      titleListData: []
    };
  },
  watch: {
    titleActive(newId) {
      if (this.titleListData[newId].barListData.length < 1) {
        this.homeBarDataAxios();
      }
    }
  },
  methods: {
    //标题获取函数
    titleListAxios() {
      this.$axios({
        method: "get",
        url: "/category"
      }).then(res => {
        const { data } = res.data;
        // data 遍历增加属性
        data.forEach(element => {
          //bar数据
          element.barListData = [];
          //列表下拉加载属性
          (element.loading = false), (element.finished = false);
          element.pageIndex = 1;
          element.pageSize = 10;
        });
        this.titleListData = data;
        // 渲染当前 bar 的函数
        this.homeBarDataAxios();
      });
    },
    // 当前bar数据获取函数
    homeBarDataAxios() {
      // 获取种类id
      const categoryId = this.titleListData[this.titleActive].id || 0;
      this.$axios({
        method: "get",
        url: "/post",
        params: {
          category: categoryId,
          pageIndex: this.titleListData[this.titleActive].pageIndex,
          pageSize: this.titleListData[this.titleActive].pageSize
        }
      }).then(res => {
        const { data, total } = res.data;
        this.isApplyData(data);
        this.isPageIndexAdd(total);
      });
    },
    // 下刷增加数据函数
    BaronLoad() {
      this.homeBarDataAxios();
    },
    //前往登录页函数
    goLoginClick() {
      // console.log(localStorage.getItem('token'));
      // console.log('token');
      this.$router.push({ path: "/person" });
    },
    isApplyData(data) {
      // 判断bar渲染的数据是否有存在
      if (this.titleListData[this.titleActive].barListData.length == 0) {
        this.titleListData[this.titleActive].barListData = data;
      } else if (!this.titleListData[this.titleActive].finished) {
        // 新旧数据合并
        this.titleListData[this.titleActive].loading = true;
        setTimeout(
          function() {
            this.titleListData[this.titleActive].barListData = [
              ...this.titleListData[this.titleActive].barListData,
              ...data
            ];
          }.bind(this),
          500
        );
      }
    },
    isPageIndexAdd(total) {
      // 判断 总数据 和 当前接受的数据 若少 则告知没有数据
      if (
        total <
        this.titleListData[this.titleActive].pageSize *
          this.titleListData[this.titleActive].pageIndex
      ) {
        // console.log("页数超过");
        this.titleListData[this.titleActive].finished = true;
      } else {
        // 若多 则添加 当前页数++
        this.titleListData[this.titleActive].pageIndex++;
      }
      this.titleListData[this.titleActive].loading = false;
    },
    // ! 前往栏目管理
    go_management(){
      this.$router.push({
        path:'/ProgramManagement'
      })
    }
  },
  mounted() {
    //调用标题获取函数
    this.titleListAxios();
  },
  components: {
    homeTop,
    homeBar
  }
};
</script>

<style lang="less" scoped>
.biu {
  padding-top: 200px;
}
/deep/ .van-tabs__wrap{
 margin-right: 13.889vw;
}
.iconjiantou1{
  position: absolute;
  z-index: 100;
  top: 75px;
  right: 20px;
  transform: rotate(90deg)
}
</style>